<template>
	<div class="star">
		<span v-bind:class="star" v-for="star in stars"></span>
	</div>
</template>
<script>
	export default {
		name: 'star',
		props:['num'],
  		computed:{
  			stars:function(){
  				console.log(this.num)
		  		var s = [];
			    var int_part = parseInt(this.num/10)
			    var half_part=(parseInt(this.num)/10-int_part=="0")?false:true;
			    var out_part = 5-int_part-half_part
		        for (var i = 0; i < int_part; i++) {
		          	s.push('on')
		        }
		    	if (half_part) {
		    		s.push('half')
		    	}
		    	/*for (var i = 0; i < out_part; i++) {
		          	s.push('off')
		        }*/
		        while(s.length < 5){
		        	s.push('off')
		        }
		      	return s;
  			}
  		}
	}
</script>
<style scoped>
.star span{
	display: inline-block;
	width: 14px;
	height: 14px;
	background-size: 10px 10px;
	background-repeat: no-repeat;
}
.on{
	background-image: url(../assets/star36_on@2x.png)
}
.off{
	background-image: url(../assets/star36_off@2x.png)
}
.half{
	background-image: url(../assets/star36_half@2x.png)
}
</style>